<template>
  <div class="hot_article_box">
    <div class="title"><Icon icon="hot"></Icon> 文章</div>
    <div class="con">
      <template v-if="!render_data">
        <Loading></Loading>
      </template>
      <template v-else>
        <li
          v-for="(item, i) in render_data"
          :key="item.id"
          @click="fnc(item.id)"
        >
          <router-link :to="{ name: 'ArticleId', params: { id: item.id } }">
            {{ i + 1 }}. {{ item.title }}</router-link
          >
        </li></template
      >
    </div>
  </div>
</template>
<script >
import Icon from "../IconFont";
import { Axios } from "../../axios";
import { ref, onMounted } from "vue";
import Loading from "../loading";
export default {
  components: { Icon, Loading },
  setup() {
    let render_data = ref(0);
    onMounted(() => {
      async function fn() {
        let temp_data = await Axios({
          url: "/data/get_hot_a",
          method: "post",
        });
        render_data.value = temp_data.data.data.ins;
      }
      fn();
    });

    let fnc = async (id) => {
      await Axios({
        url: "/data/lookup",
        method: "post",
        data: {
          id,
        },
      });
    };

    return {
      render_data,
      fnc,
    };
  },
};
</script>
<style lang='less'>
@import url("../../assets/global/var.less");
.hot_article_box {
  margin-top: 20px;
  width: 380px;
  color: @navigation_bar_content_color;
  font-size: 16px;
  .global_border_shadow();
  position: relative;

  .loading_box {
    top: 0px;
  }

  .title {
    border-bottom: 1px solid #eee;
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .title .icon {
    color: rgb(107, 22, 218);
    font-size: 20px;
  }
  .con {
    padding-top: 10px;
    min-height: 20vh;
    padding-bottom: 20px;
  }

  .con li {
    list-style: none;
    padding-left: 20px;
    padding-right: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    cursor: pointer;
    &:hover {
      color: @navigation_bar_content_active_color;
    }
  }
  a {
    color: @navigation_bar_content_color;
  }
}
</style>